<template>
  <!-- tableItem -->
  <div v-for="(item, index) in tableList" :key="index">
    <div v-show="item.show" class="table-header flex-center"
      :style="{ 'color': `rgb(${16 + item.level * 40},${16 + item.level * 40},${16 + item.level * 40})`, 'font-size': (16 - item.level * 1) + 'px' }">
      <div class="table-header-item table-item-0 flex-center" @click="itemCli(item, item.showChildren)">
        {{ item.channelName }}
        <span v-if="item.children && item.children.length > 0">
          <van-icon v-if="item.showChildren" name="arrow-up" />
          <van-icon v-else name="arrow-down" />
        </span>
      </div>
      <div class="table-header-item" style="background-color: #E8F5FF;">{{ item.num }}</div>
      <!-- <div class="table-header-item" style="background-color: #E9F7EC;">{{ item.person65 }}</div>
      <div class="table-header-item" style="background-color: #FFF8F0;">{{ item.num }}</div> -->
    </div>
  </div>
</template>

<script setup lang="ts">
import { popoverProps } from "vant";
import { watch } from "vue";
import { ref, reactive, onMounted, defineProps } from "vue";
const props = defineProps({
  list: Array
})
let tableList = ref([])

let itemCli = (data, show) => {
  let id = data.channelName
  data.showChildren = !show

  // console.log('show', show, data);
  if (data.children) {
    data.children.forEach(item => {
      item.show = !show
      if (show && item.children && item.children.length > 0) itemCli(item, true)
    })
  }
}

watch(() => props.list, val => {
  // console.log(props.list);
  tableList.value = []

  let fn = data => {
    data.children.forEach((item, index) => {
      data.showChildren = false;
      item.parentId = data.channelName
      item.show = false
      item.level = data.level + 1
      tableList.value.push(item)
      if (item.children && item.children.length > 0) fn(item)
    })
  }
  let list = JSON.parse(JSON.stringify(props.list))
  list?.forEach(item => {
    item.show = true
    item.level = 1
    tableList.value.push(item)
    item.children && item.children.length > 0 && fn(item)
  })
})

</script>

<style scoped>
.table-header {
  position: relative;
  width: 100%;
}

.table-header-item {
  height: 12vw;
  line-height: 12vw;
  text-align: center;
}

.table-header>div:not(:first-child) {
  flex: 1;
}

.table-item-0 {
  position: relative;
  box-sizing: border-box;
  width: 50vw;
  justify-content: space-between;
  padding: 0 5px;
}
</style>